<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<% String basePath = request.getContextPath();%>
<% String baseCSSPath = request.getContextPath()+"/resources/css";%>
<% String baseJSPath = request.getContextPath()+"/resources/js";%>
<% String baseImagePath = request.getContextPath()+"/resources/images";%>


<title>Books Store </title>

<link href="<%=baseImagePath%>/favicon.png" rel="icon">
<link href="<%=baseCSSPath%>/stylesheet.css" rel="stylesheet" type="text/css" >

<link rel="stylesheet" href="<%=baseCSSPath %>/nivo-slider/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<%=baseCSSPath %>/nivo-slider/nivo-slider.css" type="text/css" media="screen" />

<script src="<%=baseJSPath %>/jquery-1.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/jquery.nivo.slider.pack.js" type="text/javascript" ></script>


<script src="<%=baseJSPath %>/jquery_004.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/script.js" type="text/javascript" ></script>



<script src="<%=baseJSPath %>/common.js" type="text/javascript" ></script>
			 		 
</head>

<body class="common-home">

	<div class="main-shining" >
    <p style="display: none;" id="back-top"> <a href="#top"><span></span></a> </p>
		 
		
		<div class="row-1">
		<%@ include file="header.jsp" %>
		</div>
		
		<div id="container">
			<div id="notification"></div>
			<div id="column-left">
				 
				<%@ include file="navMenu.jsp" %>
			</div>

			<div id="content">
			<div style="margin-bottom:10px;">
				<div id="banner0" class="banner">
				<div  >
					<div class="slider-wrapper theme-light" >
			            <div id="slider" class="nivoSlider">
			                <img src="<%=baseImagePath %>/main_test2.jpg" data-thumb="<%=baseImagePath %>/toystory.jpg" alt="" title="This is an example of a caption1"/>
			                <a href="#"><img src="<%=baseImagePath %>/up.jpg" data-thumb="<%=baseImagePath %>/up.jpg" alt="" title="This is an example of a caption2" /></a>
			                <img src="<%=baseImagePath %>/walle.jpg" data-thumb="<%=baseImagePath %>/walle.jpg" alt="" data-transition="slideInLeft" title="This is an example of a caption3"/>
			                <img src="<%=baseImagePath %>/nemo.jpg" data-thumb="<%=baseImagePath %>/nemo.jpg" alt="" title="This is an example of a caption4" />
			            </div>
			        </div>
			     </div>
			     
				</div>
			</div>
			 	 
			  <div class="box featured">
					<%@ include file="featuredProductList.jsp" %>
				</div>
				<script type="text/javascript">
				        $('#slider').nivoSlider();
				</script>
				<div class="box new-products">
					<div class="box-heading">New products</div>
					<div class="box-content">
						<div class="box-product">
							<ul>
							
							<c:forEach var="product" items="${featuredProductList}" varStatus="status">
							<c:if test="${status.count<=5}">
							<c:choose>
							      <c:when test="${status.count%5==0}"> 
							     		<li class="last-in-line">
							      </c:when>
							      <c:otherwise>
										<li>
							      </c:otherwise>
							</c:choose>
								<div class="padd-both">
									<div class="image2">
										<a href="#"><img
											src="image_upload/${product.smallImage.path}"
											alt="${product.productName}">
										</a>
									</div>
									<div style="height: 58px;" class="name maxheight-feat">
										<a href="#">
										${product.productName }
										</a>
									</div>
									<div class="price">
										<span class="price-new">¥ ${product.discountPrice}</span><span class="price-old">¥ ${product.globalprice}</span>
									</div>
									<div class="cart">
										<a data-id="47;" class="button addToCart"><span>Add
												to cart</span>
										</a>
									</div>
									</div>
								</li>
								</c:if>
							</c:forEach>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	 <div class="footer-wrap">
	    <%@ include file="footer.jsp" %>
     </div>
	 
	</div>
	 
</body>
</html>